<template>
    <div :class="`shop-address-list-item ${mode}`" @click="selectAddress">
        <div class="select-status" v-if="!onlyShow">
            <MiniIcon v-if="isSelect" name="checkfill" :mode="mode" :styleMode="styleMode" :theme="theme" />
        </div>
        <div class="addres-info">
            <div class="tag-and-name">
                <Tag v-if="info.tag" class="tag-info" plain :color="tagColor">{{info.tag}}</Tag>
                <div class="contact-name title-color">{{info.contact_name}}({{ genderValue(info.gender) }})</div>
                <div class="contact-mobile tip-color">{{info.contact_mobile}}</div>
            </div>
            <div class="address-value title-color">{{info.address}}{{info.street_no}}</div>
        </div>
        <div class="edit-action" @click.stop="editAddress">
            <MiniIcon name="edit" :mode="mode" :styleMode="styleMode" theme="#7D7D83" />
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { MiniIcon } from '@components/base';
import { Tag } from 'vant';
import { SHOP_ADDRESS_TAG, SHOP_PEOPLE_TYPE } from '@constants/shop';
import ModeMixin from '@common/mixin';
import logger from '@common/logger';
export default {
    name: 'AddressListItem', // 地址项
    mixins: [ModeMixin],
    components: {
        MiniIcon,
        Tag,
    },
    props: {
        isSelect: {
            type: Boolean,
            default: false,
        },
        onlyShow: {
            type: Boolean,
            default: false,
        },
        info: {
            type: Object,
            default: () => {},
        },
    },
    computed: {
        tagColor() {
            return SHOP_ADDRESS_TAG.filter(item => item.value === this.$props.info.tag)[0].color;
        },
        genderValue() {
            return item => SHOP_PEOPLE_TYPE[item];
        },
    },
    methods: {
        ...mapActions([
            'changeOrderReivewAddress',
            'setEditAddressInfo',
        ]),
        selectAddress() {
            const { onlyShow, info } = this.$props;
            if (onlyShow) return;
            logger.info('AddressItem => 选中地址', info);
            this.changeOrderReivewAddress(info);
            this.$router.back();
        },
        editAddress() {
            const { info } = this.$props;
            this.setEditAddressInfo(info.addr_id);
            this.$router.push('/shop/edit-address', {
                isEdit: true,
            });
        },
    },
};
</script>

<style lang="less">
.shop-address-list-item {
    .flex();
    .mode-white();
    .p-v(@shop-gap-md);
    .p-h(@shop-gap-md);
    .shop-border-line(@border-color, 45px, 0);
    &.black {
        .shop-border-line(rgba(125, 125, 131, 0.2), 45px, 0);
    }
    &:last-child {
        &::after {
            height: 0;
        }
    }
    .select-status,
    .edit-action {
        width: 30px;
        .flex-center();
    }
    .addres-info {
        flex: 1;
        .tag-and-name {
            .flex();
            align-items: center;
            .tag-info {
                font-size: @font-size-sm;
                display: block;
                .p-v(0);
                height: 16px;
                line-height: 16px;
                .m-r(@shop-gap-sm);
            }
            .contact-name {
                font-size: @shop-font-size-md;
                font-weight: 500;
                color: @text-color;
            }
            .contact-mobile {
                color: @text-color;
                font-weight: 400;
                font-size: @font-size;
                .m-l(@shop-gap);
            }
        }
        .address-value {
            .m-t(@shop-gap-sm);
            font-size: @font-size-sm;
            color: @text-color;
        }
    }
}
</style>
